<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="map" style="width:1200px;height:1000px;"></div>

<script src="../../dist/dist.js"></script>

<script>

    let data = {
        "nodes": [
            {
                "name": "\u5468\u83b9",
                "role_id": 41,
                "group": 1,
                "avatar": "./img/140646844806.jpg"
            },
            {
                "name": "\u6c88\u661f\u79fb",
                "role_id": 42,
                "group": 1,
                "avatar": "./img/140848800133.jpg"
            },
            {
                "name": "\u8d75\u767d\u77f3",
                "role_id": 44,
                "group": 1,
                "avatar": "./img/141152124754.jpg"
            },
            {
                "name": "\u5468\u8001\u56db",
                "role_id": 49,
                "group": 1,
                "avatar": "./img/143059527666.jpg"
            },
            {
                "name": "\u5434\u8058",
                "role_id": 43,
                "group": 1,
                "avatar": "./img/141041905393.jpg"
            },
            {
                "name": "\u6c88\u56db\u6d77",
                "role_id": 50,
                "group": 1,
                "avatar": "./img/143624653261.jpg"
            },
            {
                "name": "\u5434\u851a\u6587",
                "role_id": 47,
                "group": 1,
                "avatar": "./img/143212760960.jpg"
            },
            {
                "name": "\u5343\u7ea2",
                "role_id": 51,
                "group": 1,
                "avatar": "./img/144328263786.jpg"
            },
            {
                "name": "\u5434\u6f2a",
                "role_id": 48,
                "group": 1,
                "avatar": "./img/142808729350.jpg"
            },
            {
                "name": "\u6c88\u6708\u751f",
                "role_id": 55,
                "group": 1,
                "avatar": "./img/165524797798.jpg"
            },
            {
                "name": "\u6c88\u8001\u592b\u4eba",
                "role_id": 833,
                "group": 1,
                "avatar": "./img/f933743cc2563895cb28a4ba.png"
            },
            {
                "name": "\u6c88\u592b\u4eba",
                "role_id": 832,
                "group": 1,
                "avatar": "./img/dda11486be4f1b94717ea8bb.png"
            },
            {
                "name": "\u5434\u9047",
                "role_id": 59,
                "group": 1,
                "avatar": "./img/171456600879.jpg"
            },
            {
                "name": "\u80e1\u548f\u6885",
                "role_id": 45,
                "group": 1,
                "avatar": "./img/141341851866.jpg"
            },
            {
                "name": "\u675c\u660e\u793c",
                "role_id": 46,
                "group": 1,
                "avatar": "./img/141611471224.jpg"
            },
            {
                "name": "\u5434\u6cfd",
                "role_id": 56,
                "group": 1,
                "avatar": "./img/165926893902.jpg"
            }
        ],
        "links": [
            {
                "source": 0,
                "target": 1,
                "relation": "\u670b\u53cb",
                "color": "734646"
            },
            {
                "source": 0,
                "target": 2,
                "relation": "\u670b\u53cb",
                "color": "734646"
            },
            {
                "source": 0,
                "target": 3,
                "relation": "\u517b\u5973",
                "color": "f2826a"
            },
            {
                "source": 0,
                "target": 4,
                "relation": "\u4e3b\u4ec6",
                "color": ""
            },
            {
                "source": 0,
                "target": 5,
                "relation": "\u4ec7\u4eba",
                "color": ""
            },
            {
                "source": 0,
                "target": 6,
                "relation": "\u513f\u5ab3",
                "color": "e3dce3"
            },
            {
                "source": 0,
                "target": 7,
                "relation": "\u59d0\u59b9",
                "color": "88748d"
            },
            {
                "source": 0,
                "target": 8,
                "relation": "\u5ac2\u5b50",
                "color": ""
            },
            {
                "source": 1,
                "target": 9,
                "relation": "\u54e5\u54e5",
                "color": "88748d"
            },
            {
                "source": 1,
                "target": 10,
                "relation": "\u5b59\u5b50",
                "color": "6681ae"
            },
            {
                "source": 1,
                "target": 4,
                "relation": "\u4ec7\u4eba",
                "color": ""
            },
            {
                "source": 1,
                "target": 7,
                "relation": "\u60c5\u4eba",
                "color": "fcb7e9"
            },
            {
                "source": 4,
                "target": 5,
                "relation": "\u7ade\u4e89",
                "color": ""
            },

            {
                "source": 4,
                "target": 2,
                "relation": "\u6c11\u4e0e\u5b98",
                "color": ""
            },
            {
                "source": 4,
                "target": 13,
                "relation": "\u9752\u6885\u7af9\u9a6c",
                "color": ""
            },
            {
                "source": 13,
                "target": 14,
                "relation": "\u6c42\u52a9",
                "color": ""
            },
            {
                "source": 13,
                "target": 0,
                "relation": "\u4ec7\u4eba",
                "color": ""
            },
            {
                "source": 13,
                "target": 6,
                "relation": "\u6c42\u52a9",
                "color": ""
            },

            {
                "source": 14,
                "target": 0,
                "relation": "\u4ec7\u4eba",
                "color": ""
            },
            {
                "source": 14,
                "target": 1,
                "relation": "\u4ec7\u4eba",
                "color": ""
            },
            {
                "source": 14,
                "target": 5,
                "relation": "\u5408\u4f5c",
                "color": ""
            },
            {
                "source": 14,
                "target": 9,
                "relation": "\u5229\u7528",
                "color": ""
            },

            {
                "source": 8,
                "target": 15,
                "relation": "\u5144\u59b9",
                "color": "88748d"
            },
            {
                "source": 15,
                "target": 0,
                "relation": "\u5ac2\u5b50",
                "color": ""
            },

            {
                "source": 12,
                "target": 14,
                "relation": "\u88ab\u5e2e\u52a9",
                "color": ""
            },
            {
                "source": 11,
                "target": 10,
                "relation": "\u5a46\u5ab3",
                "color": "e3dce3"
            }
        ]
    }

    var map = document.querySelector('#map');
    console.log(new RelationChart(map,data))
</script>
</body>
</html>
